<template>
  <div>
    <div>
      <el-upload class="upload-demo" with-credentials :headers="{ token: token }" drag :data="{ url: '' }"
        action="api/fileMgt/upload" multiple accept="txt,jpg,png" :on-success="upSuccess">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">上传jpg/png/txt文件,且不超过500kb</div>
      </el-upload>
    </div>
    <div>

      <el-table :data="downList.files" stripe style="width: 100%" >
        <el-table-column label="文件序号" type="index" width="330" align="center">
        </el-table-column>
       
        <el-table-column label="路径" width="430" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row }}</span>
          </template>

        </el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button @click="download(scope.row)" type="info">下载</el-button>
            <el-button @click="deleteMessage(scope.row)" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import { getFile,  downLoadService, getDelete } from '@/api/fileUpodDown'
export default {
  data() {
    return {
      token: getToken(),
      downList: []
    }
  },
  methods: {
    download(filename) {
      console.log('filename', filename);
      downLoadService(filename, this.token)
    },

   async deleteMessage(filename){
      let obj={
        url:filename
      }
      let res = await getDelete(obj)
      console.log(res)
       
       let obj1 = {
      url: ''
    }
    getFile(obj1).then(res => {
      let arr = res.data;
      this.downList = arr
      console.log('downList', this.downList)
    })
    },
    upSuccess(){
      let obj = {
      url: ''
    }
    getFile(obj).then(res => {
      let arr = res.data;
      this.downList = arr
      console.log('downList', this.downList)
    })
    }
  },
  created() {
    let obj = {
      url: ''
    }
    getFile(obj).then(res => {
      let arr = res.data;
      this.downList = arr
      console.log('downList', this.downList)
    })
  },
 
}
</script>

<style>
.el-upload {

  margin-top: 80px;
  margin-left: 450px;
}

.el-upload__tip {
  margin-left: 530px;
  margin-bottom: 90px;
}
</style>